import React, { useEffect, memo, useState } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux'

import {
    getRadios
} from "../../store/actionCreators";

import LJThemeHeaderNormal from 'components/theme-header-normal';
import LJRadioRankingCover from 'components/radio-ranking-cover';
import LJPagination from 'components/pagination';
import {
    RankingWraper
} from "./style";

export default memo(function HYRadioRanking() {
    // state
    const [currentPage, setCurrentPage] = useState(1);

    // redux
    const { currentId, radios } = useSelector(state => ({
        currentId: state.getIn(["djradio", "currentId"]),
        radios: state.getIn(["djradio", "radios"])
    }), shallowEqual)
    const dispatch = useDispatch();

    // hooks
    useEffect(() => {
        if (currentId === 0) return;
        dispatch(getRadios(currentId, 0))
    }, [dispatch, currentId]);

    const onPageChange = (page, pageSize) => {
        setCurrentPage(page);
        dispatch(getRadios(currentId, page * 30));
    }

    return (
        <RankingWraper>
            <LJThemeHeaderNormal title="电台排行榜" />
            <div className="ranking-list">
                {
                    radios.map((item, index) => {
                        return (<LJRadioRankingCover key={item.id} radio={item} />)
                    })
                }
            </div>
            <LJPagination currentPage={currentPage}
                total={1000}
                pageSize={30}
                onPageChange={onPageChange} />
        </RankingWraper>
    )
})
